<EditableTable
  rowKey="id"
  recordCreatorProps={{
    position: position as 'top',
    // Each time you add a new key, you need it
    record: () => ({ id: getNewId() }),
  }}
/>

/**
   * Get a row of data
   * @param rowIndex
   * @returns T | undefined
   *
   * @example getRowData(1) can pass in the data of the first row
   * @example getRowData("id") can also pass in rowKey to get it according to the unique key of your column.
   */
  getRowData?: (rowIndex: string | number) => T | undefined;
  /**
   * Get the data of the entire table
   * @returns T[] | undefined
   */
  getRowsData?: () => T[] | undefined;
  /**
   * Setting a row of data will simply merge the data
   *
   * {title:"old", decs:"old",id:"old"} -> set {title:"new"} -> {title:"new", decs:"old",id:"old" }
   *
   * @description will only do the merge of the first level object.
   * {title:"old", decs:{name:"old",key:"old"},id:"old"} -> set {decs:{name:"new"}} -> {title:" old", decs:{name:"new"},id:"old"} -> set {decs:{name:"old"}}
   *
   * @param rowIndex
   * @param data
   * @returns void
   *
   * Set according to line number
   * @example setRowData(1, { title:"new" }) You can pass in which row to modify
   *
   * set according to row id
   * @example setRowData("id", { title:"new" }) can also pass in rowKey, set it according to the unique key of your column.
   *
   * Clear the original data
   * @example setRowData(1, { title:undefined })
   *
   */
  setRowData?: (rowIndex: string | number, data: Partial<T>) => void;

recordCreatorProps = {
  // 顶部添加还是末尾添加
  position: 'bottom',
  // 新增一行的方式，默认是缓存，取消后就会消失
  // 如果设置为 dataSource 会触发 onchange，取消后也不会消失，只能删除
  newRecordType: 'dataSource',
  // 不写 key ，会使用 index 当行 id
  record: {},
  // 按钮的样式设置，可以设置按钮是否显示
  // 这样可以做最大行限制和最小行限制之类的功能
  style: {
    display: 'none',
  },
  // https://ant.design/components/button/#API
  ...antButtonProps,
};

recordCreatorProps = {
  // Add at the top or at the end
  position: 'bottom',
  // the way to add a new line, default is cached, will disappear when cancelled
  // if set to dataSource it will trigger onchange, it won't disappear if cancelled, only deleted
  newRecordType: 'dataSource',
  // If you don't write key, index will be used as row id
  record: {},
  // the style of the button, you can set whether the button is displayed or not
  // so that you can do things like max row limit and min row limit
  style: {
    display: 'none',
  },
  // https://ant.design/components/button/#API
  ... .antButtonProps,
};

const dom = renderFormItem();

<Form.Item>{dom}</Form.Item>;

const TagList: React.FC<{
  value?: {
    key: string;
    label: string;
  }[];
  onChange?: (
    value: {
      key: string;
      label: string;
    }[],
  ) => void;
}> = ({ value, onChange }) => {
  const ref = useRef<Input | null>(null);
  const [newTags, setNewTags] = useState<
    {
      key: string;
      label: string;
    }[]
  >([]);
  const [inputValue, setInputValue] = useState<string>('');

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value);
  };

  const handleInputConfirm = () => {
    let tempsTags = [...(value || [])];
    if (inputValue && tempsTags.filter((tag) => tag.label === inputValue).length === 0) {
      tempsTags = [...tempsTags, { key: `new-${tempsTags.length}`, label: inputValue }];
    }
    onChange?.(tempsTags);
    setNewTags([]);
    setInputValue('');
  };

  return (
    <Space>
      {(value || []).concat(newTags).map((item) => (
        <Tag key={item.key}>{item.label}</Tag>
      ))}
      <Input
        ref={ref}
        type="text"
        size="small"
        style={{ width: 78 }}
        value={inputValue}
        onChange={handleInputChange}
        onBlur={handleInputConfirm}
        onPressEnter={handleInputConfirm}
      />
    </Space>
  );
};

{
    title: 'labels',
    dataIndex: 'labels',
    width: '40%',
    renderFormItem: () => <TagList />,
    render: (_, row) => row?.labels?.map((item) => <Tag key={item.key}>{item.label}</Tag>),
  },

render: (text, record, _, action) => [
  <a
    key="editable"
    onClick={() => {
      action?.startEditable? (record.id);
    }}
  >
    Edit
  </a>,
  <EditableProTable.RecordCreator
    record={()=>{
      ...record,
      id: (Math.random() * 1000000).toFixed(0),
    }}
  >
    <a>Copy this row to the end</a
  </EditableProTable.RecordCreator>,
];

const editable = {
  actionRender: (row, config, defaultDom) => [defaultDom.save, defaultDom.cancel],
};